<template>
  <template>
    <el-tree :data="list1" :props="defaultProps" @node-click="handleNodeClick"/>
  </template>
  
  <div id="app">
    <nav>{{ weatherinfo.reportTime }} {{ rains.dayOfWeek }}</nav>
    <div class="hello">
      <!-- 城市信息 -->
      <h2>{{ weatherinfo.address }}</h2>
      <!-- 天气情况 -->
      <h1>白天温度：{{ rains.dayTemp }}℃</h1>
      <div class="detail">
        <span>白天风向：{{ rains.dayWindDirection }}&nbsp;|&nbsp;白天风力：{{ rains.dayWindPower }}&nbsp;|&nbsp;白天天气描述：{{ rains.dayWeather }}</span>
      </div>
      <h1>晚上温度：{{ rains.nightTemp }}℃</h1>
      <div class="detail">
        <span>晚上风向：{{ rains.nightWindDirection }}&nbsp;|&nbsp;晚上风力：{{ rains.nightWindPower }}&nbsp;|&nbsp;晚上天气描述：{{ rains.nightWeather }}</span>
      </div>
      <!-- 天气列表 -->
      <ul class="list">
        <li v-for="item in forecasts">
          <div>
            <h1>{{ item.dayOfWeek }}</h1>
            <h3>{{ item.date }}</h3>
            <h3>白天温度：{{ item.dayTemp }}℃</h3>
            <h3>
              <div class="detail">
                <span>白天风向：{{ item.dayWindDirection }}&nbsp;|&nbsp;白天风力：{{ item.dayWindPower }}&nbsp;|&nbsp;白天天气描述：{{ item.dayWeather }}</span>
              </div>
            </h3>
            <h3>晚上温度：{{ item.nightTemp }}℃</h3>
            <h3>
              <div class="detail">
                <span>晚上风向：{{ item.nightWindDirection }}&nbsp;|&nbsp;晚上风力：{{ item.nightWindPower }}&nbsp;|&nbsp;晚上天气描述：{{ item.nightWeather }}</span>
              </div>
            </h3>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { L12030 } from '../../api/L12030'
import { ref } from 'vue'
import { ElTree } from 'element-plus'

//#region 获取全国城市信息
interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data.label)
}

const list1 = ref([])

function switchData(list: any) {
  list.forEach((item: any) => {
    console.log(item)
    item.label = item.name

    if (item.pchilds) {
      item.children = JSON.parse(JSON.stringify(item.pchilds))
      delete item.pchilds
    }
    if (item.cchilds) {
      item.children = JSON.parse(JSON.stringify(item.cchilds))
      delete item.cchilds
    }
    if(item.children) {
      switchData(item.children)
    }
  })
}

function citys() {
  L12030.get('/api/city', {}, (data: any) => {
    if (data.success) {
      list1.value = data.data.data
      switchData(list1.value)
    }
  })
}

const defaultProps = {
  children: 'children',
  label: 'label',
}
citys()
//#endregion

//#region 获取用户位置
const info = ref({
  city: '常德',
})
function getLocation() {
  L12030.get('/api/ip', {}, (data: any) => {
    if (data.msg) {
      info.value = data.data
      console.log(info.value.city)
    }
  })
}
getLocation()
//#endregion

//#region 获取城市的天气信息
const weatherinfo = ref({
  // 城市具体信息，比如 “广东省 深圳市”
  address: '',
  //城市code
  cityCode: '',
  //此次天气发布时间
  reportTime: '',
})
//今天及未来天气列表
const forecasts = ref([])

const rains = ref({
  //日期
  date: '',
  //星期
  dayOfWeek: '',
  //白天天气描述
  dayWeather: '',
  //晚上天气描述
  nightWeather: '',
  //白天温度
  dayTemp: '',
  //晚上温度
  nightTemp: '',
  //白天风向
  dayWindDirection: '',
  //晚上风向
  nightWindDirection: '',
  //白天风力
  dayWindPower: '',
  //晚上风力
  nightWindPower: '',
})

function getrain() {
  L12030.get('/api/rain',info.value,(data: any)=>{
    if (data.msg) {
      console.log(data.data)
      weatherinfo.value = data.data
      forecasts.value = data.data.forecasts
      rains.value = data.data.forecasts[0]
    }
    else
    {
      console.log('获取天气信息失败')
    }
  })
}
getrain()
//#endregion
</script>

<style lang="scss" scoped>
h2 {
  font-size: 20px;
}
h2,
h4 {
  text-align: center;
}
nav {
  display: flex;
  padding: 10px;
}
.list {
  padding-top: 20px;
  max-width: 1480px;
  margin: 0 auto;
}
li {
  float: left;
  list-style-type: none;
  width: 200px;
  text-align: center;
  margin-top: 20px;
}
// <!-- ————————————————
// 版权声明：本文为CSDN博主「奇奇XL」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/qq_55299191/article/details/130161782 -->
</style>
